<template>
    <div class="new-box">
        <div class="header">
            <div class="title">Latest News</div>
        </div>
        <div class="body hide-scrollbar">
            <div class="news-list">
                <div class="news-item" v-for="item in news_list" :key="item.id">
                    <div class="img" :style="`--img: url(${ item.imageUrl })`"></div>
                    <div class="info">
                        <div class="title">{{ item.title }}</div>
                        <div class="more">
                            <div class="category" :style="categoryColors[item.category]">{{ item.category }}</div>
                            <div class="time-box">
                                <div class="source">{{ item.source }}</div>
                                <div class="timestamp">{{ item.timestamp }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { news_list, categoryColors } from '@/service/news';
</script>

<style scoped lang="less">
.new-box {
    width: 100%;
    flex: 1;
    max-height: 50vw;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.05);
    border-radius: 0.5vw;
    display: flex;
    flex-direction: column;
    padding-bottom: 1vw;

    .header {
        padding: 0.9vw;
        border-bottom: 0.1vw solid rgba(0, 0, 0, 0.1);

        .title {
            font-size: 0.9vw;
            font-weight: 500;
            color: #333;
        }
    }

    .body {
        flex: 1;
        overflow-y: auto;

        .news-list {
            .news-item {
                cursor: pointer;
                padding: 1vw;
                border-bottom: 0.1vw solid var(--border-color);
                display: flex;
                gap: 1vw;

                &:hover {
                    background-color: var(--bg-color);
                }

                .img {
                    --w: 3.5vw;
                    --h: 3.5vw;
                    border-radius: 0.5vw;
                }

                .info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 0.5vw;

                    .title {
                        font-size: 0.9vw;
                        font-weight: 700;
                    }

                    .more {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .category {
                            --h: 1.2vw;
                            height: var(--h);
                            line-height: var(--h);
                            padding: 0 0.5vw;
                            font-size: 0.6vw;
                            border-radius: var(--h);
                        }

                        .time-box {
                            display: flex;
                            gap: 0.5vw;
                            padding: 0.3vw 0.6vw;

                            &>div {
                                font-size: 0.6vw;
                                color: var(--text-light-color);
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>